<template>
	<view class="container">
		<!-- 登录 -->
		<view class="toubu">
			<view class="toubu-logo">
				<image src="/static/icon/logo.png" mode=""></image>
			</view>
			<view class="toubu-youbian">
				<view class="youbian-shu">
					<text>{{formatNumber(walletAddress)}}</text>
				</view>
				<view class="youbian-logo">
					<image src="/static/icon/touxian.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="zhuanzhang">
			<text class="zhuanzhang1">{{$t('zhuan.xuanzhe')}}</text>
			<radio-group class="zuanzhe1" @change="radioChange">
				<label v-for="(item,index) in radioItems" :key="index">
					<view  class="zuanzhe2">
					<radio class="zuanzhe2-radio" borderColor="#e6e6e6" backgroundColor="#2d2d32" :value="item.value" :checked="index == current"></radio>
					<view>{{item.name}}</view>	
					</view>
				</label>
			</radio-group>
			<text class="zhuanzhang1">{{$t('zhuan.shuruzhanghao')}}</text>
			<input class="zhuanzhang2" type="text" :placeholder="this.$t('kuan.qingshuru')" v-model="uid"/>
			<text class="zhuanzhang1">{{$t('zhuan.shurushulian')}}</text>
			<input class="zhuanzhang2" type="number" :placeholder="this.$t('kuan.qingshuru')" v-model="money"/>
		</view>
		
		<view class="queren" @click="sumbit">
			<text>{{$t('zhuan.quren')}}</text>
		</view>
		
		<!-- 以下是该组件使用的全部属性 -->
		<sanshui-payment-password  v-model="showModal":mode="1" :digits="6" @submit="submitHandle" />
		
	</view>
</template>

<script>
	//引入组件文件
	import SanshuiPaymentPassword from '../../components/sanshui-payment-password/sanshui-payment-password.vue'
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import walletMixin from "@/mixins/walletMixin.js"; // 钱包混入
	

	export default {
		mixins: [walletMixin],
		components:{
		            SanshuiPaymentPassword
		        },
		data() {
			return {
				radioItems: [{
						value: '0',
						name: 'USDT',
						checked: 'true'
					},
					{
						value: '1',
						name: 'USDK',
					},
					{
						value: '2',
						name: 'XGT',
					}
				],
				current:0,
				uid:'',
				money:'',
				typ:1,
				userinfo:{},
				showModal: false,
				zjc:"false",
				zfpass:"false"
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		onShow() {
			 this.getuserinfo()
		},
		methods: {
			// 获取个人资料
			getuserinfo() {
				let data = {}
				let opts = {
					url: '/user/GetUserInfo',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						this.userinfo = res[1].data.list[0]
						this.zfpass=this.userinfo.zfpass
						this.zjc=this.userinfo.zjc
			
					}
			
				})
			},
			// 格式数字
			 formatNumber(number) {
			      // 处理 undefined 或 null 的情况
			      if (!number) return '';
			      // 将数字转化为字符串
			      const str = number.toString();
			      // 提取前四位和后四位，中间用省略号代替
			      const start = str.slice(0, 5);
			      const end = str.slice(-5);
			      return `${start}......${end}`;
			    },
			radioChange(e) {
				this.current=e.detail.value
				if(this.current==0){
					this.typ=1
				}else if(this.current==1){
					this.typ=2
				} if(this.current==2){
					this.typ=3
				}
				// console.log('typ',this.typ);
			},
			// 输入支付密码
			payment(){
				if(this.zjc==="false"&&this.zfpass==="false"){
					this.$tab.redirectTo('/pages/my/zhujici')
				}else if(this.zjc==="true"&&this.zfpass==="false"){
					this.$tab.redirectTo('/pages/my/yanzengzhuci?type=1')
				}else if(this.zjc==="true"&&this.zfpass==="true"){
					this.showModal = true
				}
				
			},
			// 支付密码验证
			submitHandle(e) {
			  if(e.type=="true"){
				  this.sumbit()
			  }
			},
			// 互转 
			sumbit:Debounce(function(){
				var bizhong=""
				if(this.money<10){
					this.$modal.msg(this.$t('msg.error9'))
					return
				}
				if(this.uid==""){
					this.$modal.msg(this.$t('msg.error2'))
					return
				}
				if(this.current==0){
					bizhong="USDT"
				}else if(this.current==1){
					bizhong="USDK"
				}if(this.current==2){
					bizhong="XGT"
				}
				this.$modal.confirm(`${this.$t('msg.error7')}${this.formatNumber(this.uid)}${this.$t('msg.error8')}\n${this.money}${bizhong}`, this.$t('msg.tishi')).then(() => {
				let data = {
					money: this.money,
					type: this.typ,
					uid:this.uid
				}
				let opts = {
					url: '/user/MomeyHz',
					method: 'POST'
				};
				// console.log('打印入参',data);
				this.api.httpsTokenRequest(opts, data).then(res => {
					// console.log('互转', res);
					if (res[1].data.state == 'success') {
						this.$modal.msg(res[1].data.msg)
					}else{
						this.$modal.msg(res[1].data.msg)
					}
				
				})
				})
			},1000)
		},
	}
</script>

<style>
	.container{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* 头部登录 */
	.toubu{
		width: 94%;
		padding: 20rpx;
		margin-top: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.toubu-logo{
		width: 180rpx;
		height: 60rpx;
	}
	.toubu-youbian{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.youbian-shu{
		width: 220rpx;
		height: 50rpx;
		border-radius: 30rpx;
		background-color: #5e5e5e;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 15rpx;
	}
	.youbian-logo{
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 50%;
	}
	.zhuanzhang{
		width: 84%;
		padding: 25rpx;
		display: flex;
		flex-direction: column;
		background-color: #4e4e4e;
		border-radius: 20rpx;
		border: 1rpx solid #89b6f0;
		margin-top: 20rpx;
	}
	.zhuanzhang1{
		font-size: 36rpx;
		font-weight: 700;
		margin-left: 15rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.zhuanzhang2{
		width: 90%;
		padding: 20rpx;
		border-radius: 10rpx;
		border: 1rpx solid #89b6f0;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
	.zuanzhe1{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}
	.zuanzhe2{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 25rpx;
	}
	.zuanzhe2-radio{
		transform:scale(0.8);
	}
	.erweima{
		width: 90%;
		display: flex;
		justify-content: end;
		margin-top: 20rpx;
	}
	.queren{
		width: 90%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #89b6f0;
		border-radius: 20rpx;
		margin-top: 160rpx;
	}
	.queren:active{
		border: 1rpx solid #89b6f0;
		background-color: #4e4e4e;
	}
</style>